<template>
    <div>
        <div>
            <Top><p>账户信息</p></Top>

            <div class="three">

                <van-uploader :after-read="afterRead" class="up">
                    <p class="up-p"><span>头像</span> <span class="right img1"> <img
                            :src="'https://elm.cangdu.org/img/'+url2" alt="">  <van-icon name="arrow"/></span></p>
                </van-uploader>

                <p @click="up('/myuser/username')"><span>用户名</span><span class="right"><span>{{username}}</span><van-icon
                        name="arrow"/></span></p>
                <p @click="up('/myuser/shipping')"><span>收货地址</span><span class="right"><van-icon
                        name="arrow"/></span></p>
            </div>
            <p class="pp">账号绑定</p>
            <div class="four">
                <p @click="$store.commit('clicktan',true)"><span><van-icon name="phone-o" color="rgb(74, 165, 240)"/></span>手机<span class="right"> <van-icon
                        name="arrow"/></span></p>
            </div>
            <p class="pp">安全设置</p>
            <div class="four">
                <p @click="up('/myuser/changepassword')"><span><van-icon name="closed-eye" color="rgb(74, 165, 240)"/></span>登录密码<span
                        class="right"><span>修改</span> <van-icon
                        name="arrow"/></span></p>
            </div>
        </div>
      <div class="delted"><van-button type="danger" block @click="deleteuser()">退出登录</van-button></div>
        <div>
            <transition enter-active-class="animate__animated animate__fadeIn">
                <router-view></router-view>
            </transition>
        </div>
      <Tan><p>请到app中修改好几个好久</p></Tan>
    </div>
</template>

<script>
    import Top from "./Top";
    import Tan from "@/components/Tan";

    export default {
        name: "Myuser",
        components: {Tan, Top},
        data() {
            return {
              username:""
            }
        },
        methods: {
            afterRead(file) {
                this.axios.get("https://elm.cangdu.org/v1/addimg/avatar").then(data => {
                    console.log(data.data)
                    console.log(file);
                }).catch(err => {
                    console.log(err)
                })
                console.log(file);
            },
            up(a) {
                console.log(a);
                this.$router.push(a);

            },
          deleteuser(){
              localStorage.removeItem('user');
              this.$router.push('/loin')
          }
        },
        computed: {
            url2() {
                if (localStorage.user==undefined){
                    return 'default.jpg'
                }else {
                    return JSON.parse(localStorage.user).avatar
                }
            },
            // username(){
            //     if (localStorage.user==undefined){
            //         return "登录/注册";
            //     }else {
            //         return JSON.parse(localStorage.user).username;
            //     }
            // }

        },
      created() {
        this.username=JSON.parse(localStorage.user).username
      },
      beforeRouteUpdate(to,form,next){
          this.username=JSON.parse(localStorage.user).username
        next();
      }
    }
</script>

<style scoped>
    .up {
        width: 100%;
    }

    .up-p {
        width: 100%;
    }

    .three {
        margin-top: 10px;
        background-color: white;
    }

    .four {
        /*margin-top: 10px;*/
        background-color: white;
    }

    .right {
        display: inline-block;
        float: right;
    }

    .three p, .four p {
        /*padding-left: 1.6rem;*/
        height: 30px;
        line-height: 30px;
        width: 90%;
        /*background-color: #3190e8;*/
        border-bottom: 1px solid #f1f1f1;
        padding: 0.4rem .266667rem .433333rem 1.6rem;
        font-size: 1rem;
        color: #333;
    }

    .three p span:nth-child(1), .four p span:nth-child(1) {
        margin-right: 5px;
    }

    .three p:nth-child(1) {
        height: 40px;
        line-height: 40px;
    }

    .img1 img {

        /*display: inline-block;*/
        width: 40px;
        height: 40px;
        /*line-height: 60px;*/
        border-radius: 50%;
        vertical-align: middle;
        /*margin-bottom: 23px;*/

    }

    .pp {
        padding: .4rem;
        font-size: .5rem;
        color: #666;
    }

    /deep/ .van-uploader__input-wrapper {
        position: relative;
        width: 100%;
    }
    .delted{
      padding: 20px;
    }
</style>